<template>
  <div class="app-container">
    <div class="btn-top">
      <div class="btn" >
        <el-select v-model="navaige"  size="small" placeholder="请选择">
          <el-option
            style="width:200px"
            size="small"
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value">
          </el-option>
        </el-select>
        <el-button
          class="ment-left"
          size="small"
          icon="el-icon-search"
          type="primary"
          @click="finduser"
        >查询</el-button>
        <el-button
          size="small"
          icon="el-icon-refresh-right"
          type="danger"
          @click="navremove"
        >清空</el-button>
        <el-button
          size="small"
          icon="el-icon-circle-plus"
          type="warning"
          @click="adduser"
        >添加</el-button>
      </div>
    </div>
    <div>
      <el-card class="box-card ">
      <el-table
      border
      :data="finalist"
      stripe
      style="width: 100%"
     >
      <el-table-column
        prop="username"
        label="名称"
      />
      <el-table-column
        prop="link"
        label="跳转地址"
      />
      <el-table-column
        prop="name"
        label="新页面打开"
      />
      <el-table-column
        prop="address"
        label="热点"
      />
      <el-table-column
        prop="address"
        label="类型"
      />
      <el-table-column
        prop="address"
        label="排序（以大到小显示）"
      />
      <el-table-column
        prop="status"
        label="状态">
        <template slot-scope="scope">
          <el-tag v-if="scope.row.status" type="success">已启用</el-tag>
          <el-tag v-else type="danger">未启用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="260">
        <template slot-scope="scope">
          <el-button
            size="mini"
            @click="thawbuser(scope.$index, scope.row)"
          >冻结</el-button>
          <el-button
            size="mini"
            type="danger"
            @click="seleteuser(scope.$index, scope.row)"
          >删除</el-button>
          <el-button
            size="mini"
            type="primary"
            @click="Modifyuser(scope.$index, scope.row)"
          >修改</el-button>
        </template>
      </el-table-column>
     </el-table>
      </el-card>
    </div>
    <div>
      <el-dialog title="添加用户" :visible.sync="navigationFormVisible" class="dialogform">
        <el-form :model="navigation" >
          <el-form-item >
            <label-wrap  class="dialog-item">导航栏名称</label-wrap>
            <el-input v-model="navigation.name" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">跳转链接</label-wrap>
            <el-input v-model="navigation.link" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">新页面打开</label-wrap>
            <el-select v-model="navigation.pages"  class="dialog-input">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">热点</label-wrap>
            <el-select v-model="navigation.hot" class="dialog-input">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <label-wrap  class="dialog-item">类型</label-wrap>
            <el-select v-model="navigation.type" class="dialog-input">
            <el-option label="首页" value="首页"></el-option>
            <el-option label="个人中心" value="个人中心"></el-option>
            <el-option label="尾部友链" value="尾部友链"></el-option>
            <el-option label="尾部标签" value="尾部标签"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">排序(由小到大显示)</label-wrap>
            <el-input v-model="navigaModify.sorting" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="navigationFormVisible = false">返 回</el-button>
          <el-button type="primary" @click="addFormrmine">提 交</el-button>
        </div>
      </el-dialog>
      <el-dialog title="修改用户" :visible.sync="navigationFormmodify" class="dialogform">
        <el-form :model="navigaModify" >
          <el-form-item >
            <label-wrap  class="dialog-item">导航栏名称</label-wrap>
            <el-input v-model="navigaModify.name" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">跳转链接</label-wrap>
            <el-input v-model="navigaModify.link" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">新页面打开</label-wrap>
            <el-select v-model="navigaModify.pages" class="dialog-input">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">热点</label-wrap>
            <el-select v-model="navigaModify.hot" class="dialog-input">
              <el-option label="是" value="是"></el-option>
              <el-option label="否" value="否"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item >
            <label-wrap  class="dialog-item">类型</label-wrap>
            <el-select v-model="navigaModify.type" class="dialog-input">
              <el-option label="首页" value="首页"></el-option>
              <el-option label="个人中心" value="个人中心"></el-option>
              <el-option label="尾部友链" value="尾部友链"></el-option>
              <el-option label="尾部标签" value="尾部标签"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <label-wrap  class="dialog-item">排序(由小到大显示)</label-wrap>
            <el-input v-model="navigaModify.sorting" autocomplete="off" class="dialog-input"></el-input>
          </el-form-item>
        </el-form>
        <div slot="footer" class="dialog-footer">
          <el-button @click="navigationFormmodify = false">返 回</el-button>
          <el-button type="primary" @click="ModifyFormrmine">提 交</el-button>
        </div>
      </el-dialog>
    </div>
  </div>
</template>

<script>
import request from "@/utils/request";
import {mapActions, mapState} from "vuex";

export default {
  name: 'Navigation',
  data(){
    return{
      value:'',
      navigationFormVisible:false,
      navigationFormmodify:false,
      navigation:{
        name:'',
        link:'',
        pages:'',
        hot:'',
        type:'',
        sorting:''
      },
      navaige:'',
      navigaModify:{
        name:'',
        link:'',
        pages:'',
        hot:'',
        type:'',
        sorting:''
      },
      options: [{
        value: '首页',
        label: '首页'
      }, {
        value: '尾部友链',
        label: '尾部友链'
      }, {
        value: '尾部',
        label: '尾部'
      }]
    }
  },
  created() {
    this.getfend()
  },
  computed:{
    ...mapState(['finalist'])
  },
  methods:{
    ...mapActions(['getfend']),
    //添加
    adduser() {
      this.navigationFormVisible=true
    },
    addFormrmine(){
      if (this.navigation) {
        request.post('/louser', this.navigation).then((resp) => {
          if (resp) {
            console.log(this.navigation)
            this.getfend()
            console.log(resp)
            this.navigation = ''
            this.navigationFormVisible=false
          } else {
          }
        })
      }
    },
    //查找用户
    finduser(){
      if (this.navaige === ''){
        this.$message.error('请输入查找内容')
      }else {
        //this.fileFilter
      }
    },
    //清除
    navremove(){
     this.navaige= ''
    },
    //解冻
    thawbuser(index,data){
      this.$confirm('此操作将冻结该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        //
        request.post('',index)

      }).catch(() => {
        this.$message({
          message: '已取消'
        })
      })
    },
    //删除
    seleteuser(index,data){
      this.$confirm('此操作将永久删除该用户, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        request.delete('/delete', data.id).then((resp) => {
          if (resp) {
            this.$message({
              message: '删除成功!'
            })
            this.getfend()
          }
        })
      }).catch(() => {
        this.$message({
          message: '已取消删除'
        })
      })
    },
    //修改
    Modifyuser(index,data){
      this.navigaModify =data
      this.navigationFormmodify=true
    },
    //点击确定修改
    ModifyFormrmine(){
      request.put('/update',this.navigaModify).then((resp)=>{
        if (resp){
          this.$message.success('修改成功！')
          this.navigationFormmodify=false
        }else {
          this.$message.success('修改已取消！')
        }
      })
    }
  }
}
</script>

<style scoped>
::v-deep .el-table th,
::v-deep .el-table td {
  text-align: center !important;
}
.ment-left{
  margin-left: 10px;
}
.btn-top{
  margin-bottom: 20px;
}
.btn{
  width: 540px;
}
.dialogform{
  width: 65%;
  margin: auto;
}
.dialog-input{
  width: 75%;
  margin: auto;
  float: right;
}
.dialog-item{
  width: 60px;
}
</style>
